﻿@model Yes.Web.Blog.Models.Article.DetailView
@{
    ViewBag.Title = "Detail";
    Layout = "~/Views/Shared/_Layout.cshtml";
}



@section CssJs{ 
    <link rel="stylesheet" type="text/css" href="/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css">
}

<div class="layoutSingleColumn">
    <article class="u-paddingTop50" itemscope="itemscope" itemtype="http://schema.org/Article">
        <header class="entry-header">
            <h1 class="entry-title" itemprop="headline">@(Model.Article.Title)</h1>
            <div class="entry-meta">
                <a href="@(Url.Action("Archive","Article",new { Year = Model.Article.PublishDate.Year, Month =  Model.Article.PublishDate.Month}))">
                    <time datetime="@(Model.Article.PublishDate)">@(Model.Article.PublishDate.ToString("yyyy-MM-dd"))</time>
                </a>
                <span class="middotDivider"></span>
                <a href="@(Url.Action("Category","Article",new { CategoryId = Model.Category.Id}))" rel="category tag">@(Model.Category.Name)</a>
                <span class="middotDivider"></span>
                阅读(@(Model.Article.ReadCount))
            </div>
        </header>
        <div class="grap" itemprop="articleBody">
            @(Html.Raw(Model.Article.Content))
        </div>
        <div class="supplementalPostContent">

        </div>

    </article>

    <div id="comments" class="responsesWrapper">
        <h3 class="responses-title" style="padding-left:0px;">已经有 <span class="commentCount">@(Model.Article.CommentCount)条</span> 评论</h3>
        @if (Model.Article.CanComment)
        {
            <div id="respond" class="respond">
                <h3 id="reply-title" class="comments-title">发表评论</h3>
                <form id="commentform" class="responsesForm">
                    <textarea id="Content" class="inputGroup inputTextarea" aria-required="true" rows="8" cols="45" name="Content"></textarea>
                    <div style="margin:5px 0">
                        <span style="width:120px; display: inline-block; ">昵称（*）：</span>
                        @if (Model.LoginInfo != null)
                        {
                            <input type="text" class="inputGroup" name="NickName" id="NickName" value="@(Model.LoginInfo.NickName)" />
                        }
                        else
                        {
                            <input type="text" class="inputGroup" name="NickName" id="NickName" />
                        }
                    </div>
                    <div style="margin:5px 0">
                        <span style="width:120px;display:inline-block; ">邮箱：</span>
                        @if (Model.LoginInfo != null)
                        {
                            <input type="text" class="inputGroup" name="Email" id="Email" value="@(Model.LoginInfo.Email)" />
                        }
                        else
                        {
                            <input type="text" class="inputGroup" name="Email" id="Email" />
                        }
                    </div>
                    <div style="margin:5px 0">
                        <span style="width: 120px;display:inline-block; ">网站：</span>
                        @if (Model.LoginInfo != null)
                        {
                            <input type="text" class="inputGroup" name="Url" id="Url" value="@(Model.LoginInfo.Url)" />
                        }
                        else
                        {
                            <input type="text" class="inputGroup" name="Url" id="Url" />
                        }
                    </div>


                    <div class="inputSubmit" id="submit">发表评论</div>
                    <input type='hidden' name='ArticleId' value='@(Model.Article.Id)' id='ArticleId' />
                </form>
            </div>
            <ul id="commentList" style="margin-bottom: 60px;"></ul>
            <div id="page"></div>
        }
        else
        {
            <div id="respond" class="respond">
                <p style="font-size:12px">该文章已关闭了评论</p>
            </div>
        }

    </div>

</div>
<script id="list" type="text/html">
    {{# for(var i = 0, len = d.length; i < len; i++){ }}
    <li style="border-bottom: 1px dotted #DFDFDF;margin-bottom: 10px;">
        <p>#{{ d[i].nickName }}：{{ $('<span />').text(d[i].content).html() }}</p>
        <p style="color:#999; font-size:12px;"> 发布于 {{ getFriendlyTime(d[i].postDate,'@(DateTime.Now)') }}</p>
    </li>
    {{# } }}
</script>
<script type="text/javascript" src="//lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>
<script type="text/javascript" src="/layer/layer.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/laytpl.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/laypage.js"></script>

<script>
    var pageIndex = 1;
    $(function () {
        GetPager();

        SyntaxHighlighter.all();

        $("#submit").on("click",
            function () {
                var content = $("#Content").val();
                if (!content) {
                    layer.msg("请输入评论内容", { icon: 5 });
                    return;
                }
                var nickname = $("#NickName").val();
                if (!nickname) {
                    layer.msg("请输入昵称", { icon: 5 });
                    return;
                }
                var pattern = /^[A-Za-z0-9\u4e00-\u9fa5]{2,10}$/gi;
                if (!pattern.test(nickname)) {
                    layer.msg("昵称只能包含中英文及数字，且长度为2到10", { icon: 5 });
                    return;
                }

                $.ajax({
                    type: "POST",
                    url: "@(Url.Action("AddComment", "Article"))",
                    data: $("form").serialize(),
                    success: function (result) {
                        if (result.status) {
                            $("#Content").val("");
                            layer.msg('评论成功，请等待审核！', { icon: 1 });
                        } else {
                            var error = result.errorMessage;
                            if (result.data) {
                                error += "<br>" + result.data;
                            }
                            layer.alert(error, { icon: 5 });
                        }
                    }
                });
            });
    });


    function GetPager() {
        if ($("#commentList").length == 0) {
            return;
        }
        $.ajax({
            type: "POST",
            url: "@(Url.Action("GetCommentPageInfo", "Article"))",
            data: { pageIndex: pageIndex,articleId:@(Model.Article.Id) },
            success: function (result) {
                if (result.status) {
                    laytpl($("#list").html()).render(result.data.list, function (html) {
                        $("#commentList").html(html);
                    });
                    laypage({
                        cont: 'page',
                        pages: result.data.pageCount,
                        curr: pageIndex||1,
                        jump: function (obj, first) {
                            if (!first) {
                                pageIndex = obj.curr;
                                GetPager();
                            }
                        }
                    });
                } else {
                    var error = result.errorMessage;
                    if (result.data) {
                        error += "<br>" + result.data;
                    }
                    layer.alert(error, { icon: 5 });
                }
            }
        });
    }


    function getFriendlyTime(str, now) {
        if (!str) {
            return "";
        }
        var currentTime = new Date(now);
        var arr = str.split(/\s+/gi);
        var temp = 0, arr1, arr2, oldTime, delta;
        var getIntValue = function (ss, defaultValue) {
            try {
                return parseInt(ss, 10);
            } catch (e) {
                return defaultValue;
            }
        };
        var getWidthString = function (num) {
            return num < 10 ? ("0" + num) : num;
        };
        if (arr.length >= 2) {
            arr1 = arr[0].split(/[\/\-]/gi);
            arr2 = arr[1].split(":");
            oldTime = new Date();
            oldTime.setYear(getIntValue(arr1[0], currentTime.getFullYear()));
            oldTime.setMonth(getIntValue(arr1[1], currentTime.getMonth() + 1) - 1);
            oldTime.setDate(getIntValue(arr1[2], currentTime.getDate()));

            oldTime.setHours(getIntValue(arr2[0], currentTime.getHours()));
            oldTime.setMinutes(getIntValue(arr2[1], currentTime.getMinutes()));
            oldTime.setSeconds(getIntValue(arr2[2], currentTime.getSeconds()));

            delta = currentTime.getTime() - oldTime.getTime();

            if (delta <= 6000) {
                return "1分钟内";
            }
            else if (delta < 60 * 60 * 1000) {
                return Math.floor(delta / (60 * 1000)) + "分钟前";
            }
            else if (delta < 24 * 60 * 60 * 1000) {
                return Math.floor(delta / (60 * 60 * 1000)) + "小时前";
            }
            else if (delta < 3 * 24 * 60 * 60 * 1000) {
                return Math.floor(delta / (24 * 60 * 60 * 1000)) + "天前";
            }
            else if (currentTime.getFullYear() != oldTime.getFullYear()) {
                return [getWidthString(oldTime.getFullYear()), getWidthString(oldTime.getMonth() + 1), getWidthString(oldTime.getDate())].join("-")
            }
            else {
                return [getWidthString(oldTime.getMonth() + 1), getWidthString(oldTime.getDate())].join("-");
            }
        }
        return "";
    }
</script>


